<!DOCTYPE html>
<html>
  <!--
    Please see demo tree15.html for a new implementation using the dojo/store
  -->
  <head>
    <meta charset="utf-8">
    <title>The CheckBox Tree and cbtree/data File Store</title>
    <!--
      Load the CSS files including the Apache style icons, alternatively load fileIconsMS.css
      instead to get Microsoft Windows style icons (but not both).
    -->
    <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../themes/claro/claro.css";
      @import "../../icons/fileIconsApache.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: true,
            baseUrl: "../../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../../dojo/dojo.js"></script>
    <script type="text/javascript">
      require([
        "dojo/ready",
        "cbtree/Tree",                   // Checkbox tree
        "cbtree/extensions/TreeStyling", // Checkbox tree Styling
        "cbtree/models/FileStoreModel",  // FileStoreModel
        "cbtree/data/FileStore"
        ], function( ready, Tree, TreeStyling, FileStoreModel, FileStore) {

          // Because of the generic nature of this demo it has no knowledge of the file system layout
          // under the DOCUMENT_ROOT, therefore the 'basePath' is set to the document root itself.
          // The option 'iconClass' forces the server side application to include the icon classname
          // in the response.
          var store = new FileStore( { url: "../../store/server/PHP/cbtreeFileStore.php",
                                        basePath:"./",
                                        options:["iconClass"] } );

          // Tell the model to look for the store item property 'icon' and process it as an icon.
          var model = new FileStoreModel( {
                  store: store,
                  rootLabel: 'My HTTP Document Root',
                  checkedRoot: true,
                  checkedStrict: false,
                  iconAttr: "icon",
                  queryOptions: {ignoreCase:true},
                  sort: [{attribute:"directory", descending:true},{attribute:"name"}]
               });

          ready(function() {
            // Create the tree and set the icon property so the tree root uses the same set of icons
            // all tree nodes will use (not required but for consistancy only).
            var tree = new Tree( { model: model, id: "MenuTree",
                                    icon: {iconClass:"fileIcon"}
                                  }, "CheckboxTree" );
            tree.startup();
          });

        });
    </script>
  </head>

  <body class="claro">
    <h1 class="DemoTitle">The CheckBox Tree with a dojo/data File Store and Fancy Icons</h1>
    <p>
      This demo uses the cbtree/data/FileStore and the assciated PHP server side application to browse the document root
      of your HTTP server.<br/>This example uses lazy loading, that is, the files are only fetched when
      needed. In addition Apache style icons are used to decorate the tree nodes, a set of Microsoft Windows icons is also
      available.
    </p>
    <p>
      The HTTP server running this demo MUST have PHP support enabled and provide PHP support for JSON.
    </p>
    <div id="CheckboxTree">
    </div>
  </body>
</html>